<template>
  <div>

    <van-nav-bar left-text="返回" @click-left='prev' left-arrow/>

    <form action="/">
      <van-search v-model="value" type="tel" maxlength="11" shape="round" placeholder="请输入手机号" @search="onSearch"/>
    </form>


    <van-list :finished="finished" :finished-text="errorMessage">
      <van-cell v-show="isPhone" :to="{name:'searchResult', params:{phone:phone}}" :title="phone"/>
    </van-list>

    <van-row v-show="isActive" type="flex" justify="center">
      <van-loading color="#1989fa" size="50"/>
    </van-row>


  </div>
</template>

<script>
  import {getRequest} from "network/getRequest";

  export default {
    name: "Search",
    data() {
      return {
        value: '',
        phone: '',
        finished: false,
        isActive: false,
        isPhone: false,
        errorMessage: '未查询到该用户'
      };
    },
    methods: {
      onSearch(phone) {
        this.isActive = true;
        this.errorMessage = '';
        let params = {phone}
        getRequest('/user/search', params).then(res => {
          this.isActive = false;
          if (res.code != 200) {
            this.phone = '';
            this.finished = true;
            this.errorMessage += " ^_^!  " + res.msg;
          } else {
            this.isPhone = true;
            this.phone = res.data.phone;
          }
        });
      },
      prev() {
        this.$router.go(-1)
      }
    },
  }
</script>

<style scoped>

</style>